Reactstrap is a version Bootstrap made for React.
It’s a set of React components that have Boostrap styles.
In this article, we’ll look at how to add custom inputs and input groups with Reactstrap.
Custom Inputs
We can add custom inputs to our app.
For example, we can write:
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { CustomInput, Form, FormGroup, Label } from "reactstrap";
export default function App() {
return (
<div>
<Form>
<FormGroup>
<Label for="exampleCheckbox">Checkboxes</Label>
<div>
<CustomInput
type="checkbox"
id="exampleCustomCheckbox"
label="mango"
/>
<CustomInput
type="checkbox"
id="exampleCustomCheckbox2"
label="orange"
/>
<CustomInput type="checkbox" label="pear" disabled />
<CustomInput
type="checkbox"
id="checkbox"
label="checkbox"
htmlFor="checkbox"
disabled
/>
</div>
</FormGroup>
<FormGroup>
<Label for="exampleCheckbox">Radios</Label>
<div>
<CustomInput type="radio" name="name" label="foo" />
<CustomInput type="radio" name="customRadio" label="qux" />
<CustomInput type="radio" id="name" label="bar" disabled />
<CustomInput
type="radio"
label="baz"
htmlFor="exampleCustomRadio4_X"
disabled
/>
</div>
</FormGroup>
<FormGroup>
<Label for="exampleCheckbox">Switches</Label>
<div>
<CustomInput
type="switch"
id="switch"
name="fruit"
label="banana"
/>
<CustomInput type="switch" id="grape" name="fruit" label="grape" />
<CustomInput type="switch" id="apple" label="apple" disabled />
<CustomInput type="switch" id="orange" label="orange" disabled />
</div>
</FormGroup>
<FormGroup>
<Label for="exampleCheckbox">Inline</Label>
<div>
<CustomInput
type="checkbox"
label="An inline custom input"
inline
/>
<CustomInput type="checkbox" label="and another one" inline />
</div>
</FormGroup>
<FormGroup>
<Label for="select">Custom Select</Label>
<CustomInput type="select" id="select" name="customSelect">
<option value="">Select</option>
<option>Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
</CustomInput>
</FormGroup>
<FormGroup>
<Label for="multiselect">Custom Multiple Select</Label>
<CustomInput
type="select"
id="multiselect"
name="customSelect"
multiple
>
<option value="">Select</option>
<option>Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
</CustomInput>
</FormGroup>
<FormGroup>
<Label for="custom-select">Custom Select Disabled</Label>
<CustomInput
type="select"
id="custom-select"
name="custom-select"
disabled
>
<option value="">Select</option>
<option>Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
</CustomInput>
</FormGroup>
<FormGroup>
<Label for="multiple-select">Custom Multiple Select Disabled</Label>
<CustomInput
type="select"
id="multiple-select"
name="customSelect"
multiple
disabled
>
<option value="">Select</option>
<option>Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
</CustomInput>
</FormGroup>
<FormGroup>
<Label for="range">Custom Range</Label>
<CustomInput type="range" id="range" name="range" />
</FormGroup>
<FormGroup>
<Label for="file">File Browser</Label>
<CustomInput type="file" id="file" name="file" />
</FormGroup>
<FormGroup>
<Label for="file-2">File Browser with Custom Label</Label>
<CustomInput
type="file"
id="file-2"
name="customFile"
label="pick a file"
/>
</FormGroup>
<FormGroup>
<Label for="file-3">File Browser Disabled</Label>
<CustomInput type="file" id="file-3" name="file-3" disabled />
</FormGroup>
</Form>
</div>
);
}
We use the CustomInput component with various props.
type has the type of input to render.
It also takes options as children if the type is select .
We can make inputs inline with the inline prop.
If the type is set to switch , them we get a switch.
Input Group
Input groups are containers for inputs.
We can put content other than inputs inside input groups in addition to inputs itself.
For example, we can write:
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { InputGroup, InputGroupAddon, InputGroupText, Input } from "reactstrap";
export default function App() {
return (
<div>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>@</InputGroupText>
</InputGroupAddon>
<Input placeholder="username" />
</InputGroup>
<br />
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<Input addon type="checkbox" />
</InputGroupText>
</InputGroupAddon>
<Input placeholder="I agree" />
</InputGroup>
<br />
<InputGroup>
<Input placeholder="username" />
<InputGroupAddon addonType="append">
<InputGroupText>[@example](http://twitter.com/example "Twitter profile for @example").com</InputGroupText>
</InputGroupAddon>
</InputGroup>
<br />
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>$</InputGroupText>
<InputGroupText>$</InputGroupText>
</InputGroupAddon>
<Input placeholder="amount" />
<InputGroupAddon addonType="append">
<InputGroupText>$</InputGroupText>
<InputGroupText>$</InputGroupText>
</InputGroupAddon>
</InputGroup>
<br />
<InputGroup>
<InputGroupAddon addonType="prepend">$</InputGroupAddon>
<Input placeholder="Amount" min={0} max={100} type="number" step="1" />
<InputGroupAddon addonType="append">.00</InputGroupAddon>
</InputGroup>
</div>
);
}
We have the InputGroup component to use as the input group container.
InputGroupText has the content for the input group addon.
We can have text or other elements inside it.
InputGroupAddon has the addons on each side.
addonType specifies the side that it’ll be on.
If it’s prepend , it’ll be on the left side.
If it’s append , then it’ll be on the right side.
Addon Sizing
The size of the addon can be changed.
For example, we can write:
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { InputGroup, InputGroupAddon, Input } from "reactstrap";
export default function App() {
return (
<div>
<InputGroup size="lg">
<InputGroupAddon addonType="prepend">lg</InputGroupAddon>
<Input />
</InputGroup>
<br />
<InputGroup>
<InputGroupAddon addonType="prepend">normal</InputGroupAddon>
<Input />
</InputGroup>
<br />
<InputGroup size="sm">
<InputGroupAddon addonType="prepend">sm</InputGroupAddon>
<Input />
</InputGroup>
</div>
);
}
to change their size with the size prop.
The prop is on the InputGroup component so that the sizing applies to everything inside.
Conclusion
We can add custom inputs add inputs flexibly.
Also, we can add input groups to add elements to the left or right of the input.
